<template>
    <div class="sc">
        <p class="pp">小默商城</p>
        <van-cell-group inset style="border-radius: 40px;height: 38px;line-height: 30px;margin-top: 10px;">
            <van-field v-model="value" placeholder="输入商品名称" />
        </van-cell-group>
    </div>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image"
            style="border-radius: 20px;overflow: hidden;margin-top: 10px;margin-bottom: 10px;">
            <img style="width: 100%;height: 150px;" :src="image" />
        </van-swipe-item>
    </van-swipe>
    <p>
        <img src="/public/img/2.png" alt="" style="width: 100%;">
    </p>
    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>

    <!-- 商品 -->
    <van-card v-for="i in shop" :key="i.id" :price="i.pageSize" :desc="i.name" :title="i.title"
        :thumb="i.url" @click="tiao(i)" />
</template>

<script setup>
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ref } from 'vue';
let router = new useRouter()
const active = ref(0);
const images = [
    '/public/img/1.png',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
let shop=ref([])
const order = async () => {
    const res = await axios.get('/api/room/list')
    console.log('res', res.data.data.list);
    shop.value=res.data.data.list
}
order()
let tiao = (v) => {
    router.push({
        path: '/datail/+v.id',
        query: {
            v
        }
    })
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
}

.sc {
    width: 100%;
    height: 100px;
    background: rgb(33, 187, 136);
}

.pp {
    color: #fff;
    font-size: 20px;
    text-align: left;
    padding-top: 10px;
    margin-left: 20px;
}

.sp dl {
    width: 45%;
    height: 200px;
    /* background: pink; */
    float: left;
    margin-left: 10px;

}

.sp dl dd p {
    text-align: left;
}

.sp dl dd span {
    color: red;
}
</style>